<!-- 人员管理 -->
<template>
    <div class="PerManagement">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="所有员工" name="first">
                <div class="top">
                    <el-form ref="form" :model="form" label-width="100px">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="员工姓名">
                                    <el-input v-model.trim="form.deptName" @keyup.enter.native="search"
                                        @change="resetPage">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <div class="btndiv">
                                    <el-button v-blur class="query" @click="search">查询</el-button>
                                    <el-button v-blur class="reset" @click="reset">重置</el-button>
                                    <el-button v-blur class="added" @click="add">新增</el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div class="tableDiv">
                    <el-table stripe :data="tableData" style="border-radius: 6px" :header-cell-style="{
                        color: '#333333', fontFamily: 'PingFang SC', fontSize: '14px', fontWeight: 500, background: '#F4F8FF',
                        borderBottom: '1px solid #B9DAF2'
                    }">
                        <el-table-column type="aa" label="姓名" width='55px'></el-table-column>
                        <el-table-column prop="deptName" label="联系电话"></el-table-column>
                        <el-table-column prop="" label="角色权限"></el-table-column>
                        <el-table-column prop="" label="职位"></el-table-column>
                        <el-table-column prop="" label="工号"></el-table-column>
                        <el-table-column prop="operation" label="操作">
                            <template slot-scope="scope">
                                <el-button v-blur @click="edit(scope.$index, scope.row, $event)" type="warning" plain
                                    size="mini">修改
                                </el-button>
                                <el-button v-blur @click="delet(scope.$index, scope.row, $event)" type="danger" plain
                                    size="mini">查看
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagediv">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="recordsFiltered">
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane :label="'新的同事' + '(' + NumberOfNewColleagues+')'" name="second">
                <div class="top">
                    <el-form ref="form" :model="form" label-width="120px">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="申请人姓名">
                                    <el-input v-model.trim="form.deptName" @keyup.enter.native="search"
                                        @change="resetPage">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <div class="btndiv">
                                    <el-button v-blur class="query" @click="search">查询</el-button>
                                    <el-button v-blur class="reset" @click="reset">重置</el-button>
                                    <el-button v-blur class="added" @click="add">新增</el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div class="tableDiv">
                    <el-table stripe :data="tableData" style="border-radius: 6px" :header-cell-style="{
                        color: '#333333', fontFamily: 'PingFang SC', fontSize: '14px', fontWeight: 500, background: '#F4F8FF',
                        borderBottom: '1px solid #B9DAF2'
                    }">
                        <el-table-column type="aa" label="申请时间"></el-table-column>
                        <el-table-column prop="deptName" label="申请人"></el-table-column>
                        <el-table-column prop="" label="联系电话"></el-table-column>
                        <el-table-column prop="" label="申请处理状态"></el-table-column>
                        <el-table-column prop="" label="处理人"></el-table-column>
                        <el-table-column prop="" label="处理时间"></el-table-column>
                        <el-table-column prop="operation" label="操作">
                            <template slot-scope="scope">
                                <el-button v-blur @click="delet(scope.$index, scope.row, $event)" type="danger" plain
                                    size="mini">查看
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagediv">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="recordsFiltered">
                    </el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>

    </div>
</template>

<script>
import '@/assets/queryPublic.css'
export default {
    name: 'PerManagement',
    data() {
        return {
            activeName: "first",
            NumberOfNewColleagues: 0,
            pageNum: 1,
            pageSize: 10,
            recordsFiltered: 0,
            form: {
                deptName: "",
                deptBeltoRegiCode: "",
            },
            tableData: [],
            custTypeList: [],

        }
    },
    mounted() {

    },
    methods: {
        resetPage() {
            this.pageNum = 1;
        },
        search() {
            this.GetList()
        },
        reset() {
            this.pageNum = 1;
            this.form.deptName = "";
            this.form.deptBeltoRegiCode = "";
            this.GetList()
        },
        add() {
            this.$router.push({
                name: 'organizationModify',
                params: {
                    key: '新增组织结构'
                }
            })
        },
        GetList() {
            // const data = {
            //     "pageNum": this.pageNum,
            //     "pageSize": this.pageSize,
            //     "param": this.form
            // }
            // api.queryOrgDeptList(data).then(res => {
            //     this.tableData = res.data.data;
            //     this.recordsFiltered = res.data.recordsFiltered;
            // })
        },
        edit(i, r, e) {
            this.$router.push({
                name: 'organizationModify',
                params: {
                    id: r.deptNo,
                    key: '修改组织机构'
                }
            })
        },

        handleSizeChange(val) {
            this.pageSize = val;
            this.pageNum = 1;
            this.GetList()
        },
        handleCurrentChange(val) {
            this.pageNum = val;
            this.GetList()
        },

    }
}
</script>

<style scoped lang='scss'>
.btndiv{
    text-align: center;
}
</style>
